<template>
  <div>
    <h1>App</h1>
    <div>
      <h3>销售情况展示:</h3>
      <p>总销售额度:{{ currencyFn(price.allPrice) }}</p>
      <p>单价:{{ currencyFn(price.singlePrice) }}</p>
      <p>本周销售额:{{ currencyFn(price.totalPrice) }}</p>
    </div>
    <div>
      <h3>销售情况展示:</h3>
      <!-- 在插值语法中,通过添加一个|(管道符)使用过滤器,过滤会自动的接收被过滤的数据交给过滤器函数的第一个参数 -->
      <p>总销售额度:{{ price.allPrice | currency }}</p>
      <p>单价:{{ price.singlePrice | currency }}</p>
      <p>本周销售额:{{ price.totalPrice | currency }}</p>
    </div>
    <div>
      <!-- <ul>
        <li v-for="item in person | orderBy" :key="item.id">
          name:{{ item.name }}--age:{{ item.age }}--weight:{{ item.weight }}
        </li>
      </ul> -->
      <p>
        {{ person | orderBy("age") }}
      </p>
      <p>
        {{ person | orderBy("weight") }}
      </p>
    </div>

    <Header />
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "App",
  components: {
    Header,
  },
  data() {
    return {
      price: {
        allPrice: 101238124,
        singlePrice: 238,
        totalPrice: 12378213,
      },
      person: [
        { id: 1, name: "小王", age: 18, weight: 180 },
        { id: 2, name: "小张", age: 28, weight: 130 },
        { id: 3, name: "小李", age: 12, weight: 140 },
        { id: 4, name: "小航", age: 22, weight: 110 },
      ],
    };
  },
  methods: {
    currencyFn(price) {
      return "￥" + price.toFixed(2);
    },
  },
  /* 
    使用filters配置项给当前组件配置过滤器
    过滤器是一个函数,函数的第一个参数就是过滤器要过滤的数据
    过滤器的返回值就是数据过滤后的输出的结果
  */
  filters: {
    currency(value) {
      // console.log(value);
      return "￥" + value.toFixed(2);
    },
    /* 
      在模板中使用过滤器的时候，可以进行传参，过滤器函数的第二个参数就是接收过滤器使用时的传参
    */
    orderBy(value, type) {
      // console.log(value, type);
      return [...value].sort((a, b) => a[type] - b[type]);
    },
  },
};
</script>

<style></style>
